<template>
    <div>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
        <!-- <a-modal v-model="show" title="关键字详情列表" width="60%">
      <el-table :data="tableList" height="600" border style="width: 100%">
        <el-table-column prop="app_name" label="类别" width="120" align="center">
        </el-table-column>
		<el-table-column prop="" label="触发" width="200" >
          <template slot-scope="scope">
            <div>关键词类别：{{ scope.row.trigger_class }}</div> 
            <div>关键词：{{ scope.row.trigger_value }}</div>
            <div>触发对象：{{ scope.row.nick }}</div>
            <div>是否群聊：{{ scope.row.isChatRoom==0?'否':'是' }}</div>
            <div>触发时间：{{scope.row.infoTime!==0?formateDate(scope.row.infoTime):'暂无时间'}}</div>
            <div v-if="scope.row.otherPhone">触发对象手机号：{{scope.row.otherPhone}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" >
        </el-table-column>>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-sizes="[20, 50, 100, 150]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </a-modal> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getEchartsData,geiAppInfoList } from '@/api/proofOnly/index'
import { parseTime } from '@/utils/index'

export default {
    name:'pieBox',
    props:['pirData','value1', "value2", "selectedItems"],
    data(){
        return{
          offset:1,
          limit:20,
          show:false,
          tableList:[],
          total:0,
          model:''
        }
    },
    mounted(){
      this.initChartBox();

    },
    watch: {
      pirData: function(newData, oldData) {
        // 当 pirData 发生变化时更新图表
        this.initChartBox();
      }
    },
    created(){
    },
    methods:{
      jumpContent(row){
		const proof_num = row.proofNum
		// const phoneNumber = Number(row.otherPhone);
		switch (row.app_name) {
			case '通讯录':
				row.list_offset = 1;
				row.list_limit = 20;
				row.msg_offset = 1;
				row.app_name = row.phone?row.phone:row.otherPhone;
				row.proof_num = proof_num
				break;
			case '短信':
				row.list_offset = 1;
				row.list_limit = 20;
				row.msg_offset = 1;
				row.app_name = row.phone?row.phone:row.otherPhone;
				row.proof_num = proof_num;
				break;
			case '微信':
				row.list_offset = 1;
				row.list_limit = 20;
				row.msg_offset = 1;
        row.app_name = row.isChatRoom==0?'好友':'群组'
				row.proof_num = proof_num;
				row.account_id = row.ACCOUNT_ID;
				row.username = row.username;
				row.contact_username = row.CONTACTNAME;
				row.msgtime = row.infoTime;
				row.id = row.tid;
				break;
			default:
				break;
		}
			// 储存类型
			sessionStorage.setItem('model',row.model)
			// 储存节点数据
			sessionStorage.setItem('sumData',JSON.stringify(row))
			// 激活跳转组件
			this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
			sessionStorage.setItem('only',true);
			this.visible = false;
			this.$router.push({ name: "Dashboard"});
	},
      formateDate(date){
    return parseTime(date);
  },
        initChartBox(){
var chartDom = document.getElementById('chartdiv');
var myChart = echarts.init(chartDom);
var option;
console.log(this.pirData)
option = {
  dataset: {
    source: this.pirData
  },
  title: {
          text: this.$t('analyze.keyAppWord'),
          subtext: "",
          left: "center",
        },
  color: ['#00BFFF', '#FFC125', '	#B22222','#A020F0','#D2691E'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
     
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      encode: {
        itemName: 'app_name', // 数据中的 name 字段对应饼图的名称
        value: 'cnt' // 数据中的 cnt 字段对应饼图的值
      },
      tooltip: {
        trigger: 'item',
        // formatter: '{a} <br/>{b} : {c}%'
        formatter: function(params) {
        // params 包含了 tooltip 的所有信息
        // params.seriesName: 系列的名称
        // params.name: 数据项的名称
        // params.value: 数据项的值
        return `${params.name}<br/> 占比:${params.data.percentage}%`;
      }
      },
      labelLine: {
        show: false
      },
      // data:this.pirData
    }
  ]
};
 // 添加点击事件
 myChart.on("click", this.handleChartClick);
// option && myChart.setOption(option);
      // option && myChart.setOption(option);
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); 
      });

        },
      handleChartClick(params){
        this.offset = 1;
        this.model = params.data.model;
      let data = {
        proof_num: this.value1,
        starttime: this.value2[0] ? this.value2[0]/1000 : 0,
        endtime: this.value2[1] ? this.value2[1]/1000 : 2000000000,
        trigger_value: this.selectedItems.join(","),
        offset: this.offset,
        limit: this.limit,
        model:params.data.model?params.data.model:this.model
      };
        geiAppInfoList(data).then(res=>{
          // this.show = true;
          this.$parent.initPieDataList(res.data,res.data[0].cnt)
          this.tableList = res.data;
          this.total = res.data[0].cnt;
        }).catch(error=>{

        })
      },
      initOffsetApp(offset,limit){
        this.offset = offset;
        this.limit = limit;
        this.funcitonPage('')
      },
      funcitonPage(){
        let data = {
        proof_num: this.value1,
        starttime: this.value2[0] ? this.value2[0] : 0,
        endtime: this.value2[1] ? this.value2[1] : 2000000000,
        trigger_value: this.selectedItems.join(","),
        offset: this.offset,
        limit: this.limit,
        model:this.model
      };
        geiAppInfoList(data).then(res=>{
          // this.show = true;
          this.$parent.initPieDataList(res.data,res.data[0].cnt)
          this.tableList = res.data;
          this.total = res.data[0].cnt;
        }).catch(error=>{

        })
      }
      
    }
}
</script>

<style>
#chartdiv {
  width: 800px;
  height: 500px;
}
.amcharts-logo {
  display: none !important;
}
</style>